import React, {PropTypes} from 'react';
import {connect} from 'dva';
import {routerReduc} from 'dva/router';
import {Card, Button, Tabs, Row, Col,} from 'antd';

const TabPane = Tabs.TabPane;
var problemSourceData = [
  {
    portrait: 'https://zos.alipayobjects.com/rmsportal/iXsgowFDTJtGpZM.png',
    name: '王远正',
    class: '地质一班',
    problem: '11·24丰城电厂施工平台倒塌事故是指2016年11月24日7点左右，江西省宜春市丰城电厂三期在建项目冷却塔施工平桥吊倒塌，造成横版混凝土通道倒塌事故。11·24丰城电厂施工平造成横版混凝土通道倒塌事故。',
    date: '2016-12-02',
    isReply: false
  }, {
    portrait: 'https://zos.alipayobjects.com/rmsportal/iXsgowFDTJtGpZM.png',
    name: '王远正',
    class: '地质二班',
    problem: '11·24丰城电厂施工平台倒塌事故是指2016年11月24日7点左右，江西省宜春市丰城电厂三期在建项目冷却塔施工平桥吊倒塌，造成横版混凝土通道倒塌事故。11·24丰城电厂施工平造成横版混凝土通道倒塌事故。',
    date: '2016-12-02',
    isReply: true
  }, {
    portrait: 'https://zos.alipayobjects.com/rmsportal/iXsgowFDTJtGpZM.png',
    name: '王远正',
    class: '地质三班',
    problem: '11·24丰城电厂施工平台倒塌事故是指2016年11月24日7点左右，江西省宜春市丰城电厂三期在建项目冷却塔施工平桥吊倒塌，造成横版混凝土通道倒塌事故。11·24丰城电厂施工平造成横版混凝土通道倒塌事故。',
    date: '2016-12-02',
    isReply: true
  }, {
    portrait: 'https://zos.alipayobjects.com/rmsportal/iXsgowFDTJtGpZM.png',
    name: '王远正',
    class: '地质四班',
    problem: '11·24丰城电厂施工平台倒塌事故是指2016年11月24日7点左右，江西省宜春市丰城电厂三期在建项目冷却塔施工平桥吊倒塌，造成横版混凝土通道倒塌事故。11·24丰城电厂施工平造成横版混凝土通道倒塌事故。',
    date: '2016-12-02',
    isReply: false
  }
];

class ProblemList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      problemData: []
    };
  }

  componentDidMount() {
    let {problemData} = this.state;
    problemSourceData.map((ele, index) => {
      problemData.push(ele);
    });
    this.setState({
      problemData
    });
  }

  _goReply() {
    this.props.changeList();
  }

  _showButton(e) {
    let tar = e.currentTarget;
    tar.children[2].style.display = 'block';
  }

  _hideButton(e) {
    let tar = e.currentTarget;
    tar.children[2].style.display = 'none';
  }

  render() {
    let _allList = [];
    let _noReplyList = [];
    let _ReplyList = [];

    this.state.problemData.map((ele, index) => {
      let _temp = <li key={`allProblem${index}`} onMouseOver={(e) => this._showButton(e)} onMouseOut={(e) => this._hideButton(e)}>
        <div className="itemHead">
          <div className="stdInfo">
            <img src={ele.portrait} />
            <div className="name">
              <p>{ele.name}</p>
              <p>{ele.class}</p>
            </div>
          </div>
        </div>
        <div className="itemContent">
          <p>{ele.problem}</p>
          <div className="date">{ele.date}</div>
        </div>
        {!ele.isReply &&
          <div className="handleContent">
            <Button type="ghost" onClick={() => this._goReply()}>回复</Button>
            <Button type="ghost" className="btRight">忽略</Button>
          </div>
        }
      </li>;

      _allList.push(_temp);
      if(ele.isReply) {
        _ReplyList.push(_temp);
      } else {
        _noReplyList.push(_temp);
      }
    });

    return(
      <Card title="学员问答" className="studentsAsk">
        <Tabs defaultActiveKey="1" onChange={() => {}}>
          <TabPane tab="全部问题(23)" key="1">
            <ul>
              {_allList}
            </ul>
          </TabPane>
          <TabPane tab="未回复(3)" key="2">
            <ul>
              {_noReplyList}
            </ul>
          </TabPane>
          <TabPane tab="已回复(20)" key="3">
            <ul>
              {_ReplyList}
            </ul>
          </TabPane>
        </Tabs>
      </Card>
    );
  }
}

export default ProblemList;
